<script setup lang="ts">

  // GET 获取登录用户相关文章 /u/article
  // GET /u/article/{id} id获取文章信息
  // import {computed} from 'vue'
  const nuxtApp = useNuxtApp()
  const typeLen = ref([
    {
      value: -1,
      label: '全部',
      active: true,
      len: 0
    },
    {
      value: 0,
      label: '已发布',
      active: false,
      len: 0
    },
    {
      value: 1,
      label: '审核中',
      active: false,
      len: 0
    },
    {
      value: 2,
      label: '未通过',
      active: false,
      len: 0
    }
  ])
  const articleDataList = ref([])
  const nowSta = ref(-1)
  nuxtApp.$tokenExpireJudge()
  const getDataList = async() => {
    const {data, msg} = await nuxtApp.$request('/u/article',{
      method: 'GET',
      server: true,
      key: 'getArticleList'
    }).catch(e => {
      // nuxtApp.$mutual['notification'].error({
      //   content: e.message,
      //   duration: 5000
      // })
    })
    console.log(data)
    if (data){
      articleDataList.value = data
      typeLen.value[0].len = data.length
      for(const i of data) {
        const artSta = i.status || i.status === null ? 1 : i.status
        typeLen.value[typeLen.value.findIndex(t => t.value == artSta)].len += 1
      }
    }
  }
  getDataList()

  const listData = computed(() => {
    const filterData = nowSta.value === -1 ? articleDataList.value : articleDataList.value.filter(a => {
      const artSta = a.status || a.status === null ? 1 : a.status
      return artSta === nowSta.value
    })
     return filterData.map(item => {
       const artSta = item.status || item.status === null ? 1 : item.status
       return {
         ...item,
         staLabel: typeLen.value.find(i => (i.value == artSta)).label
       }
     })
  })
  function changeTab(e) {
    nowSta.value = e.value
  }

</script>


<template>
  <ClientOnly>
    <n-card style="margin-bottom: 16px">
      <n-tabs type="line" animated>
        <n-tab-pane name="文章">
          <div>
            <div>
              <span class="tab-item" v-for="item in typeLen" :key="item.value" @click="changeTab(item)" :class="{active: item.value === nowSta}">{{item.label}}（{{item.len}}）</span>
            </div>
          </div>
          <article-list :article-data-list="listData" @delete="getDataList"/>
        </n-tab-pane>
      </n-tabs>
    </n-card>
  </ClientOnly>
</template>

<style scoped lang="scss">
  .card-tabs .n-tabs-nav--bar-type {
    padding-left: 4px;
  }
  .tab-item {
    cursor: pointer;
    margin-right: 8px;
    &.active {
      color: #335fab;
      font-weight: bold;
    }
  }
</style>
